<template>
  <page-view class="relative flex flex-row justify-center items-center">
    <img src="../assets/img/login_bg.jpg" class="absolute w-full h-full -z-10 blur-[27px]" />
    <div class="login-box">
      <div class="flex flex-row justify-center items-center py-10">
        <el-icon size="36px" color="#409EFC" class="no-inherit">
          <Eleme />
        </el-icon>
        <span class="text-[26px] font-bold ml-6 text-[rgb(5,5,5)]" >饿了么点餐后台</span>
      </div>
      <el-form :model="adminInfo" class="box-border px-[35px] mt-10" :rules="adminInfoRules" ref="loginFormEl">
        <el-form-item prop="zh">
          <el-input v-model="adminInfo.zh" placeholder="请输入账号">
            <template #prepend>账号</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="admin_pwd">
          <el-input v-model="adminInfo.admin_pwd" type="password" placeholder="请输入账号">
            <template #prepend>密码</template>
          </el-input>
        </el-form-item>
        <div class="flex flex-row justify-evenly">
          <el-button type="primary" @click="submitLoginForm" :loading="isLoading" :loading-icon="Loading">
            {{isLoading?'正在登陆...':'登录系统'}}</el-button>
          <el-button type="danger" >忘记密码</el-button>
        </div>
      </el-form>
    </div>
  </page-view>
</template>

<script setup>

import {useRouter} from "vue-router";

import API from "../utils/API";
// 所见即所得，所见即所用
import { reactive, ref } from "vue";
import { Eleme,Loading } from "@element-plus/icons-vue";
//导出没有加default,所以需解构
import {mainStore}  from "../store";
//成功提示
import {ElNotification} from "element-plus"

const isLoading=ref(false);
//创建store
const store =mainStore();

const router=useRouter();


const adminInfo = reactive({
  zh: "13811111111",
  admin_pwd: "123456"
});

//这里就是验证规则
const adminInfoRules = {
  zh: [
    { required: true, message: "请输入账号", trigger: "blur" }
  ],
  admin_pwd: [
    { required: true, message: "请输入密码", trigger: "blur" }
  ]
}


const loginFormEl = ref(null);

const submitLoginForm = () => {
  loginFormEl.value.validate(valid => {
    if (valid) {
      console.log("验证成功");
      checkLogin();
    }
    else {
      console.log("验证失败");
    }
  });
}

const checkLogin =()=>{
  isLoading.value=true;
  API.adminInfo.checkLogin(adminInfo).then((result)=>{

    console.log(result);
    store.setToken(result.token);
    store.setLoginUserInfo(result.loginUserInfo)

    ElNotification({
      title:"提示",
      message:"登陆成功",
      type:"success"
    });

    router.replace({
      name:"DataView",
    })
  }).catch((error)=>{
    console.log(error);


  }).finally(()=>{
    isLoading.value=false;
  })
}


</script>

<style scoped lang="scss">
.login-box {
  @apply w-[420px] py-[30px];
  // width: 420px;
  // padding: 20px 0 20px 0;
  box-shadow: 0 0 25px 10px white;
}
</style>